<template>
	<view style="height: 100%;">
		<AdToram v-if="!top"></AdToram>
		<!-- <navbar title="微码优选" :bgColor="top?'#fa4f66':'transparent'" color="#fff"></navbar> -->
		<view
			style="width: 100%;;padding-bottom: 20rpx;background-size: 100% 100%;background-repeat: no-repeat;background-image: url(https://xps.yowswl.com/image/admin/2023/11/04/caa436f54f9046618812f271488f9199c214af7esy.png);">
			<view
				style="position: fixed;left: 0;top: 0;width: 100%;z-index: 10000;background-repeat: no-repeat;background-size: 100%;background-image: url(https://xps.yowswl.com/image/admin/2023/11/04/caa436f54f9046618812f271488f9199c214af7esy.png);">
				<view style="padding: 10rpx;display: flex;align-items: center;justify-content: space-between;"
					:style='{paddingTop:`${rect.top}px`}'>
					<view
						style="padding:12rpx 20rpx;border-radius: 30rpx;margin-right: 20rpx;display: flex;align-items: center;margin-left: 14rpx;"
						@click="goCard('/pages/sub/store/address')">
						<view
							style="margin-right: 10rpx;font-size: 28rpx;font-weight: 700;color: #fff;margin-bottom: 6rpx;">
							{{address.name}}
						</view>
						<u-icon name="arrow-down" color="#fff" size="12"></u-icon>
					</view>
					<view style="display: flex;align-items: center;">
						<image :src="logo" mode="widthFix" style="width: 60rpx;border-radius: 28rpx;"></image>
						<view style="margin-left: 10rpx;color: #fff;">{{title}}</view>
					</view>
					<view style="width: 180rpx;"></view>
				</view>
				<view style="padding: 20rpx;" ref="heigth">
					<view style="background-color: rgba(167, 167, 167,.2);border-radius: 26rpx;">
						<u-search placeholder="搜索内容" :showAction='false' :disabled='true' height='60' bgColor='#fff'
							color='#000' searchIcon='search' placeholderColor='#000' searchIconColor='#000'
							@click="search()">
						</u-search>
					</view>
				</view>
			</view>
			<view style="height:280rpx;"></view>
            <u-notice-bar :text="notifyList" direction="column" bgColor="rgba(000, 000, 000, .3)" color="#fff"
            	customStyle="padding: 20rpx;box-sizing: border-box;margin: 0 20rpx;">
            </u-notice-bar>
			<view style="margin: 0 20rpx;margin-top: 20rpx;">
				<mswiper :list="slideImage" height="356rpx" :nextMargin="0" :previousMargin="0" :radius="10" />
			</view>
			<!--  -->
			<!-- <navigator url="/pages/sub/store/detail?id=25">111</navigator> -->
			
			<view style="margin:20rpx;border-radius: 20rpx;" v-if="menuList.length>5">
				<swiperMenus :list="menuList" :size="5" />
			</view>
			<view
				style="border-radius: 20rpx;display: flex;align-items: center;background-color: #fff;border-radius: 20rpx;padding:20rpx;margin:20rpx 20rpx 0 20rpx;justify-content: space-between;"
				v-else>
				<view v-for="(item,index) in menuList" :key="index" @click="goCard(item.url)">
					<image :src="item.image" mode="" style="width: 80rpx;height: 80rpx;display: block;margin: auto;">
					</image>
					<view class="menu_item u-line-1" style="color:#000">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 分类 -->

		<view>
			<!-- <view style="display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;">
				<view style="color: #000;font-size: 30rpx;font-weight: 650;">会议记录</view>
				<view style="color:#000; font-size: 24rpx;"@click="goCard('/pages/sub/store/screen')">更多</view>
		   </view>
		   <view style="padding: 20rpx;border-radius: 20rpx;background-color:#fff;margin: 20rpx 20rpx 0 20rpx;">
			    <scroll-view :scroll-x="true">
					 <view style="display: flex;align-items: center;justify-content: space-between;">
						 <view v-for="(item,index) in meeting" :key="index" style="margin-right: 20rpx;" @click="goCard('/pages/sub/store/detail?id='+item.id)">
							<view style="position: relative;width:326rpx;">
								 <image :src="item.image" style="width:326rpx;border-radius: 20rpx 20rpx 0 0;display: block;height: 326rpx;"></image>
								 <view style="position: absolute;width: 100%;bottom: 0;left: 0;background-color: rgba(84, 79, 73,.4);">
									 <view style="display: flex;align-items: center;justify-content: space-between;font-size: 22rpx;color:#fff;padding: 10rpx;">
										 <view class="">{{item.beginTime}}</view>
										 <view class="">{{item.week}}</view>
									 </view>
								 </view>
							</view>
							 <view style="background-color: #f6f6f6;border-radius: 0 0 20rpx 20rpx;padding: 20rpx;width: 286rpx;">
								 <view style="width: 100%;font-size: 28rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;width: 286rpx;">{{item.name}}</view>
								 <view style="display: flex;justify-content: space-between;align-items: center;">
									 <view style="font-size: 20rpx;color:#98a3b8;padding: 10rpx 0;color: #000;">{{item.province+item.city}}</view>
									 <view v-if="item.isMake">
									 	   <view style="padding: 10rpx 40rpx;background-color: red;color: #fff;font-size: 22rpx;border-radius: 20rpx;" v-if='item.isMake==1&detail.statue==0' @click.stop="goCard(`/pages/sub/store/application?orderId=${item.orderId}&Id=${item.id}`)">报名 </view>
									 	   <view style="padding: 10rpx 40rpx;background-color:green;color: #fff;font-size: 22rpx;border-radius: 20rpx;" v-if='item.isMake==0&detail.statue==0' @click.stop="showTow('你已报名参加,请暂且等待会议开始')">已报名</view>
									 	   <view style="padding: 10rpx 40rpx;background-color: #b7c3c7;color: #fff;font-size: 22rpx;border-radius: 20rpx;" v-if='item.statue==2' @click.stop="showTow('会议已结束了哦,请看看其他会议吧')">已结束</view>
									 	   <view style="padding: 10rpx 40rpx;background-color:#87d0ea;color: #fff;font-size: 22rpx;border-radius: 20rpx;" v-if='item.statue==1' @click.stop="showTow('会议已开始')">活动中</view>
									 </view>
									 <view v-else>
									 	   <view style="padding: 10rpx 40rpx;background-color: red;color: #fff;font-size: 22rpx;border-radius: 20rpx;"  @click.stop="goCard(`/pages/sub/store/application?orderId=${item.orderId}&Id=${item.id}`)">报名 </view>
									 </view>
								 </view>
							 </view>
						 </view>
					 </view>
				</scroll-view>
		   </view> -->
			<u-sticky :offset-top="`${rect.bottom+60}`">
				<view style="margin: 8rpx 0;" :class="sticky?'poa':''" :style="{top:`${rect.bottom+60}px`}">
					<cc-dropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"
						@itemClick='itemClick()' :bgcolor='500<navTop||sticky?"#fff":"#f8f8f8"'></cc-dropDownMenu>
				</view>
			</u-sticky>
			<view style="padding: 0 20rpx 20rpx 20rpx;" v-if="shopList.length!=0">
				<listItem :list="shopList" :params='params'></listItem>
			</view>
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text='列表为空'>
				</u-empty>
			</view>
		</view>
		<!--弹窗  -->
		<poster :list="shareList" ref="poster" />
	</view>
</template>

<script>
	import listItem from "@/components/lsitItem.vue"
	import mswiper from '@/components/swiperList.vue'
	import AdToram from "@/components/AdToram.vue"
	import navbar from '@/components/baseNavbar.vue'
	import prolist from '@/components/prolist.vue'
	import swiperMenus from '@/components/swiperMenus.vue'
	import slidingListImage from '@/components/slidingListImage.vue'
	import style from 'uni.scss'
	import Citys from '@/components/city.js';
	import city from "@/pages/sub/components/address-picker/AddressData.js"
	import {
		goNav
	} from '@/lib/Comment.js'
	import {
		getIndexList,
		getChildList
	} from "@/api/make.js"
	import {
		getNotifyList,
	} from "@/api/public.js"
	import {
		getConfig,
		getGroupValue
	} from "@/api/public.js"
	import {
		getHomeList,
		getkillHome,
		getPingHome
	} from "@/api/product.js"
	import {
		getkillList
	} from '@/api/seckill.js'
	import {
		getProductList,
		getStoreProductListAll
	} from '@/api/storeProduct.js'
	// import {
	// 	getNotifyList
	// } from '@/api/storeProductCartInfo.js'
	// import {
	// 	getShareList
	// } from "@/api/share.js"
	import poster from '@/components/poster.vue'
	// import datediff from "@/components/ywz-DateDiff/ywz-DateDiff.vue"
	var that = this
	export default {
		components: {
			poster,
			swiperMenus,
			navbar,
			slidingListImage,
			AdToram,
			prolist,
			mswiper,
			listItem
		},
		data() {
			return {
				address: {
					name: '广州市',
					id: ''
				},
				bg: '',
				notifyList:['测试1','测试2'],
				sticky: false,
				logo: '',
				title: '',
				navTop: '',
				rect: {},
				top: false,
				menuList: [],
				shareList: [],
				slideImage: [],
				shopList: [],
				meeting: [],
				params: {
					limit: 10,
					page: 1,
					statue: '',
					city: '',
					district: '',
					beginTime: '',
					cateld: '',
					childCateId: '',
					load: true,
					loadTxt: ''
				},
				navlist: [],
				page: {
					limit: 10,
					page: 1,
					statue: 2,
					load: true
				},
				titleArr: ['区域', '会议类型', '时间', '预约状态'],
				dropArr: [
					// 区域
					[],
					// 户型
					[],
					[],
					// [@"≤1000",@"1000-1500",@"1500-2000",@"2000-3000",@"3000-4000㎡,@"≥4000"]
					// 租金
					[{
						text: '全部',
						value: ""
					}, {
						text: '预约中',
						value: 0

					}, {
						text: '进行中',
						value: 1
					}, {
						text: "己结束",
						value: 2
					}]
				],
			}
		},

		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			this.navTop = e.scrollTop

			if (e.scrollTop > 0) {
				this.top = true
			} else {
				this.top = false
			}
			console.log(this.navTop, this.rect.bottom);
		},
		onLoad(option) {
			this.isGetLocation("scope.userLocation")
			if (option.adress) {
				let reg = JSON.parse(option.adress)
				this.address.name = reg.name
				this.dropArr[0] = reg.children
				if (!this.dropArr[0][0].id) {
					this.dropArr[0].unshift({
						text: '不限',
						value: '',
						id: 1
					})
				}
				uni.setStorageSync('address', this.dropArr[0])
				this.params.city = reg.name.replace('', '')
				uni.setStorageSync('city', this.params.city)


			}
            getNotifyList().then(res=>{
				this.notifyList = res.data
			})
			getChildList().then(res => {
				console.log('list', res);
				let arr = []
				res.data.forEach(item => {
					let obj = {
						text: item.label,
						value: item.value
					}
					arr.push(obj)
				})
				this.dropArr[1] = [{
					text: '不限',
					value: ''
				}, ...arr]
				this.navlist = this.dropArr[1]
			})
			console.log('222');
			getConfig('product_border_statue').then(res => {
				this.statue = res.data.value == 1
				if (this.statue) {
					console.log('333');
					getConfig('product_border_image').then(res => {
						this.bg = res.data.value
						console.log('路径', this.bg);
					})
					getConfig('product_border_ids').then(res => {
						if (res.data.value) {
							this.ids = res.data.value.split(',').map(Number)
						}
						console.log("ids", this.ids);
					})
				}
			})
			//通知
			getConfig("home_scole_text").then(res => {
				this.lbtext = res.data.value
				console.log('通知', this.lbtext);
			})
			getConfig("home_logo").then(res => {
				this.logo = res.data.value
			})
			getConfig("home_title").then(res => {
				this.title = res.data.value
			})


			// //弹窗
			// getShareList().then(res => {
			// 	console.log("res", res);
			// 	if (res.data != null && res.data.length!=0) {
			// 		this.shareList = res.data
			// 		this.$refs.poster.show();
			// 	}
			// 	console.log("shareList", this.shareList);
			// })
			//轮播
			getGroupValue("home_silde_image").then(res => {
				res.data.forEach(item => {
					if (item.video != undefined && item.video != '') {
						let image = item.image
						item.image = item.video
						item.poster = image
					}
				})
				this.$set(this, 'slideImage', res.data)
				console.log("11222", this.slideImage);
			})
			// 商品分类
			// getGroupValue('home_title_info').then(res => {


			// })
			getGroupValue('home_bottom_poster').then(res => {
				if (res.data && res.data.length != 0) {
					this.indeximg = res.data[0]
					console.log('t', this.indeximg);
				} else {
					this.conshows = false
				}

			})
			//首页导航
			getGroupValue("home_menu_group").then(res => {
				this.$set(this, 'menuList', res.data)
			})
			this.getcitys()
		},
		onShow() {
			this.getcitys()
			this.key = true
			this.rect = uni.getMenuButtonBoundingClientRect();
			console.log(1111, this.rect);
		},
		onReady() {
			this.rect = uni.getMenuButtonBoundingClientRect();

		},
		onHide() {
			this.key = false
		},
		// 触底触发
		onReachBottom() {
			// this.getList()
		},
		methods: {
			itemClick(e) {
				this.sticky = e
				console.log('dianjk', this.sticky);
			},
			change(e) {
				console.log('11', e);
				uni.navigateTo({
					url: "/pages/sub/store/screen?id=" + e.value
				})
			},
			getcitys() {
				let cityList = []
				city.forEach((item, index) => {
					item.children.forEach(x => {
						cityList.push(x)
					})
				})
				cityList.forEach((s, i) => {
					Citys.cities.forEach((e, d) => {
						if (i == d) {
							e.cityName = s.name
							e.children = s.children
						}
					})
				})
				let res = Citys.cities.find(item => item.cityName == this.address.name)
				this.dropArr[0] = []
				res.children.forEach(item => {
					let s = {}
					s.text = item.name
					s.value = item.id
					this.dropArr[0].push(s)
				})
				if (!this.dropArr[0][0].id) {
					this.dropArr[0].unshift({
						text: '不限',
						value: '',
						id: 1
					})
				}
				uni.setStorageSync('address', this.dropArr[0])
				this.params.city = this.address.name.replace('', '')
				uni.setStorageSync('city', this.params.city)
				console.log('初始', this.dropArr[0]);
				this.resetmList()
				this.resetList()
			},
			showTow(text) {
				uni.showToast({
					icon: 'none',
					title: text
				})
			},
			resetList() {
				this.params.page = 1
				this.shopList = []
				this.getList()
			},
			getList() {
				if (!this.params.load) {
					return;

				}
				this.params.load = false;
				this.params.loadTxt = '加载中';
				console.log('列表，参数', this.params);
				getIndexList(this.params).then(res => {
					this.params.page++
					this.shopList = this.shopList.concat(res.data.list)
					this.params.loadTxt = '已经到底啦';
					this.params.load = true
				})

			},
			resetmList() {
				this.page.page = 1
				this.meeting = []
				this.getmList()
			},
			getmList() {
				if (!this.page.load) {
					return;
				}
				this.page.load = false;
				getIndexList(this.page).then(res => {
					this.page.page++
					this.meeting = this.meeting.concat(res.data.list)
					console.log('11', this.meeting);
					this.page.load = true
				})

			},
			goCard(url, appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						envVersion: 'release'
					})
				} else {
					goNav(url)
				}

			},
			finishClick(e, f) {
				this.sticky = f
				if (e[0] != '') {
					if (e[0].id) {
						this.params.district = ''
					} else {
						this.params.district = e[0].text.replace('', '')
					}

				}
				if (e[1] != '') {
					if (e[1].id) {
						this.params.childCateId = ''
					} else {
						this.params.childCateId = e[1].value
					}
				}
				this.params.beginTime = e[2].replace('', '')
				if (e[3] != '') {
					this.params.statue = e[3].value
				}
				console.log('参数', this.params);
				this.resetList()
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + id
				})
			},
			search() {
				uni.navigateTo({
					url: "/pages/sub/store/search"
				})
			},
			getAuthorizeInfo(a) { //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				console.log("获取授权")
				var _this = this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail() { //1.2 拒绝授权
						uni.showModal({
							content: "请到设置授权定位！",
							success(res) {
								if (res.confirm) {
									_this.flag = true
									uni.openSetting()
								}
							}
						})
					}
				})
			},
			getLocationInfo() { //2. 获取地理位置
				var _this = this;
				console.log('info');
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						console.log('111', res);
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
					}
				});
			},
			isGetLocation(a) { // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) { //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo(a)
						} else {
							_this.getLocationInfo()
						}
					}
				});
			}
		},
		onShareAppMessage(res) {

			return {
				title: '吸盘鲨',
				path: '/pages/index/index'
			}
		},
		goInfo(name) {
			uni.navigateTo({
				url: "/pages/sub/user/settingInfo?name=" + name
			})
		},
		onShareTimeline() {
			return {
				title: '吸盘鲨',
				path: '/pages/index/index'
			}
		}

	}
</script>
<style lang="scss">
	page {
		font-size: 32rpx;
		margin-bottom: 30rpx;
		height: 100%;
		background-color: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-tabs__wrapper__nav__line {
		left: 0rpx !important;
	}

	.menu_item {
		text-align: center;
		font-size: 24rpx;
	}

	.poa {
		position: fixed;
		z-index: 970;
		width: 100%;
	}

	.text-g {

		background-color: #f6f6f6;
	}

	.text-g:hover {
		color: #fff;
		background-color: #fa4f66;
	}

	.list-wrapper {
		column-count: 2;
		column-gap: 20rpx;
		padding-bottom: 20rpx;
	}

	.item {
		margin-bottom: 20rpx;
		break-inside: avoid;
	}

	.label-item {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;

	}

	.label1 {
		font-size: 22rpx;
		color: #cc4b67;
		text-align: left;
		vertical-align: top;
		margin-top: 20rpx;
		line-height: 40.83rpx;
		border: 2rpx solid #cc4b67;
		padding: 0 10rpx;
		margin-right: 10rpx;
	}

	.seckill {
		display: flex;
		align-items: center;
	}

	.time {
		display: flex;
		align-items: center;
		font-size: 22rpx;
	}

	.time__item {
		background-color: #000;
		color: #fff;
		padding: 2rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
	}

	.text6 {
		color: #3e5149;
		font-weight: 800;
		font-size: 40rpx;
		text-align: center;
		line-height: 60rpx;
		letter-spacing: 8rpx;

	}

	.new {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		& .item:nth-child(1) {
			padding-right: 22rpx;
			border-right: 2rpx dashed #979797;

		}

		& .item:nth-child(2) {
			padding: 0 22rpx;
			border-right: 2rpx dashed #979797;

		}

		& .item:nth-child(3) {
			padding-left: 22rpx;
		}

		.text {
			padding: 8rpx 14rpx;
			background-color: #ffe9ed;
			border-radius: 20rpx;
			text-align: center;
			color: #ee2650;
			position: absolute;
			left: 2%;
			right: 2%;
			bottom: 20rpx;
			font-size: 18rpx;
		}

		.title {
			width: 180rpx;
			margin: 10rpx 0;
			font-size: 26rpx;
			font-weight: 650;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>